<template>
  <div>
    <boc-header></boc-header>
    <boc-menu></boc-menu>
  </div>
</template>
<script type="text/javascript">
import BocHeader from "@/components/boc-header/boc-header";
import BocMenu from "@/components/boc-menu";
import AppFooter from "@/components/app-footer";
import AppSide from "@/components/app-side";
export default {
  name: "app-view",
  data() {
    return {
      isCollapse: false,
      hideSide: false,
      sideWidth: 200,
      footerHeight: 50,
      headerHeight: 50,
      theme: { theme: {} },
    };
  },
  components: {
    BocHeader,
    AppFooter,
    AppSide,
    BocMenu,
  },
  methods: {
    handleSideSwitch(val) {
      this.isCollapse = val;
      this.sideWidth = val ? 60 : 200;
    },
    handleSwitchHideSide() {
      this.hideSide = !this.hideSide;
    },
    handleSetTheme(theme) {
      this.theme = theme;
    },
  },
};
</script>
<style type="text/css">
.app-container {
  margin: 0 auto;
  position: absolute;
  width: 100%;
  height: 100%;
}
.app-container .app-header {
  padding: 0;
  background: #16aad8;
  overflow: visible;
  z-index: 100;
}
.app-container .app-side {
  width: 200px;
  transition: all 0.5s ease;
}
.app-container .app-body {
  background: #ecf0f5;
  padding: 0;
}
.app-container .app-footer {
  background: #fff;
  border-top: solid 1px rgba(48, 54, 62, 0.14);
}
.app-container .app-page-body {
  overflow: visible;
  padding: 0px;
}
.app-header-logo-box {
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-header-logo-box .header-logo {
  height: 42px;
  margin-top: -17px;
  margin-right: 5px;
  vertical-align: middle;
}
.app-header-logo-box .header-logo-text {
  font-size: 20px;
  font-weight: bold;
  opacity: 1;
}

/*mini-side*/
.app-container.mini-side .app-side {
  overflow: visible;
}
.app-container.mini-side .app-side .el-menu--collapse {
  width: 60px;
}
.app-container.mini-side .header-logo {
  margin-left: -10px;
}
.app-container.mini-side .header-logo-text {
  opacity: 0;
}
/*hide-side*/
.app-container.hide-side .app-side {
  display: none;
}
</style>
